<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title><%= htmlWebpackPlugin.options.title%></title>
    </head>
    <body>
		<div id="root">
			<div class="section">
				<h1 class="title">操作设置</h1>
				<div class="button_group">
					<el-upload
						class="item"
						action=""
						:limit="1"
						:on-change="handleSubmit"
						accept="xlsx"
					>
						<el-button size="small" type="primary">点击上传excel</el-button>
					</el-upload>
					
					<el-button size="small" class="item" @click="start" :disabled="inputData.length == 0">开始</el-button>
					<el-button size="small" class="item" @click="exportExcel">导出excel</el-button>
					
				</div>
				<!-- <div class="threads">
					<div class="label">线程数</div>
					<el-input placeholder="线程数" v-model="threads" class="input"></el-input>
				</div> -->
				<div class="custom_export">
					<div class="label">自定义导出</div>
					<div class="customer_input">
						<el-input placeholder="城市" v-model="customCity" class="input"></el-input>
						<el-input placeholder="关键字" v-model="customKeyWord" class="input"></el-input>
					</div>
					<el-button size="size" class="btn" @click="customExport" :disabled="customCity == '' || customKeyWord == ''">导出</el-button>
					<el-button @click="removeLink"  size="size" class="btn" :disabled="customCity == '' || customKeyWord == ''">清空当前链接</el-button>
				</div>
				<div class="progress_group">
					<div class="get_url">
						<div class="label">获取链接进度</div>
						<div class="progress">
							<el-progress :text-inside="true" :stroke-width="22" :percentage="getLinkProcess"></el-progress>
						</div>
					</div>
					<div class="get_phone">
						<div class="label">获取电话进度</div>
						<div  class="progress">
							<el-progress :text-inside="true" :stroke-width="22" :percentage="getPhoneProcess" status="warning"></el-progress>
						</div>
					</div>
				</div>
				
			</div>
			<div class="has_use">
				<h1 class="title">ip剩余量</h1>
				<div>{{getipLeft()}}</div>
			</div>
			<div class="has_use">
				<h1 class="title">已经获取过的词</h1>
				<el-tag
					v-for="tag in hasUsed"
					:key="tag"
					closable
					@close="removeUse(tag)"
					class="tag"
				>
					{{tag}}
				</el-tag>
			</div>
			<div class="input_datas">
				<h1 class="title">读取excel结果</h1>
				<div class="item" v-for="item in inputData">
					<div class="address">{{item.A}}</div>
					<div class="keyword">{{item.B}}</div>
				</div>
			</div>
		</div>
    </body>

</html>